<template>
	<view class="container">
		<nav class="order-nav">
			<view :class="['nav-item', { active: activeTab === 1 }]" @click="getSmsList(1)">
				<text>全部</text>
				<view class="underline" v-if="activeTab === 1"></view>
			</view>
			<view :class="['nav-item', { active: activeTab === 2 }]" @click="getSmsList(2)">
				<text>待发送</text>
				<view class="underline" v-if="activeTab === 2"></view>
			</view>
			<view :class="['nav-item', { active: activeTab === 3 }]" @click="getSmsList(3)">
				<text>已发送</text>
				<view class="underline" v-if="activeTab === 3"></view>
			</view>
			<view :class="['nav-item', { active: activeTab === 4 }]" @click="getSmsList(4)">
				<text>发送失败</text>
				<view class="underline" v-if="activeTab === 4"></view>
			</view>
		</nav>
		<section class="section">

			
			<view class="warning-text">
				短信发送失败是因为有敏感词汇，请联系客服人工帮您发送！
			</view>
			
			<view class="order-content">
				<view v-if="orderList.length === 0" class="no-data">
					当前暂无订单数据！
				</view>
				
				<view v-else>
					<view class="order-lists" v-for="(item, index) in orderList" :key="index">
						<view class="order-item" :data-id="item.id" :data-api_send_id="item.order_id">
							<view class="order-list-header">
								<view class="order-list-no nowrap">订单号：{{ item.order_id }}</view>
								<view :class="getStatusClass(item)">
									{{ getStatusText(item) }}
									<text v-if="item.order_status === 5" class="icon-info" @click="showTip(item.remarks)">!</text>
								</view>
							</view>
							
							<view class="order-list-content">
								<view>收信号码：{{ item.shoujian_num }}</view>
								<view class="message-content">
									内容：<text class="highlight">{{ item.text_message }}</text>
								</view>
								<view>发送时间：{{ item.chuli_time || item.fasong_time }}</view>
								<view>提交时间：{{ item.order_time }}</view>
							</view>
							
							<view class="order-list-footer">
								<!-- 可以添加操作按钮  原HTML有交互 但都已注释 -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 1,
				orderList: [],
				hdata: {}
			};
		},
		onLoad() {
			// 获取本地存储的数据
			// try {
			// 	const sharedData = uni.getStorageSync('sharedData');
			// 	if (sharedData) {
			// 		this.hdata = typeof sharedData === 'string' ? JSON.parse(sharedData) : sharedData;
			// 	}
			// } catch (e) {
			// 	console.error('获取sharedData失败', e);
			// }
			uni.setNavigationBarTitle({
				title: '已发短信', 
			});
			
			this.getSmsList(1);
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			
			getSmsList(status) {
				this.activeTab = status;
				
				// 模拟API调用
				
				uni.request({
					url: '/miniApp/getSmsList.nf',
					method: 'POST',
					data: {
						asdfg: this.hdata.asdfg,
						userId: this.hdata.userId,
						order_status: status
					},
					success: (res) => {
						if (res.data.code === 0) {
							this.orderList = res.data.data.list || [];
						} else {
							uni.showToast({
								title: '系统出错！',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('获取短信列表失败', err);
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						});
					}
				});
				
				// 模拟数据
				if (status === 1) {
					// 全部
					this.orderList = [
						{
							id: 1,
							order_id: '20230501001',
							fukuan_status: 1,
							order_status: 3,
							shoujian_num: '138****1234',
							text_message: '你好，我是匿名用户，想和你聊聊',
							chuli_time: '2023-05-01 10:30:00',
							fasong_time: '2023-05-01 10:25:00',
							order_time: '2023-05-01 10:20:00'
						},
						{
							id: 2,
							order_id: '20230501002',
							fukuan_status: 1,
							order_status: 2,
							shoujian_num: '139****5678',
							text_message: '测试短信内容',
							chuli_time: '',
							fasong_time: '2023-05-01 11:00:00',
							order_time: '2023-05-01 10:55:00'
						}
					];
				} else if (status === 2) {
					// 待发送
					this.orderList = [
						{
							id: 2,
							order_id: '20230501002',
							fukuan_status: 1,
							order_status: 2,
							shoujian_num: '139****5678',
							text_message: '测试短信内容',
							chuli_time: '',
							fasong_time: '2023-05-01 11:00:00',
							order_time: '2023-05-01 10:55:00'
						}
					];
				} else if (status === 3) {
					// 已发送
					this.orderList = [
						{
							id: 1,
							order_id: '20230501001',
							fukuan_status: 1,
							order_status: 3,
							shoujian_num: '138****1234',
							text_message: '你好，我是匿名用户，想和你聊聊',
							chuli_time: '2023-05-01 10:30:00',
							fasong_time: '2023-05-01 10:25:00',
							order_time: '2023-05-01 10:20:00'
						}
					];
				} else if (status === 4) {
					// 发送失败
					this.orderList = [
						{
							id: 3,
							order_id: '20230501003',
							fukuan_status: 1,
							order_status: 5,
							shoujian_num: '137****9999',
							text_message: '包含敏感词的短信内容',
							chuli_time: '',
							fasong_time: '',
							order_time: '2023-05-01 12:00:00',
							remarks: '短信包含敏感词汇'
						}
					];
				}
			},
			
			getStatusClass(item) {
				if (item.fukuan_status === 0) {
					return 'order-list-state state-fail';
				} else if (item.order_status === 1) {
					return 'order-list-state state-await';
				} else if (item.order_status === 2) {
					return 'order-list-state state-await';
				} else if (item.order_status === 3) {
					return 'order-list-state state-success';
				} else {
					return 'order-list-state state-fail';
				}
			},
			
			getStatusText(item) {
				if (item.fukuan_status === 0) {
					return '未付款';
				} else if (item.order_status === 1) {
					return '正在审核';
				} else if (item.order_status === 2) {
					return '待发送';
				} else if (item.order_status === 3) {
					return '发送成功';
				} else {
					return '发送失败';
				}
			},
			
			showTip(msg) {
				uni.showModal({
					title: '提示',
					content: msg,
					showCancel: false
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header-tool {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		font-size: 18px;
		font-weight: bold;
	}
	
	.header-tool view {
		margin-right: 20rpx;
	}
	
	.section {
		padding: 20rpx;
	}
	
	.order-nav {
		display: flex;
		background-color: #fff;
		border-radius: 10rpx;

		overflow: hidden;
	}
	
	.nav-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 14px;
		position: relative;
	}
	
	.nav-item.active {
		color: #EC81A7;
	}
	
	.underline {
		width: 60rpx;
		height: 6rpx;
		background-color: #EC81A7;
		margin: 10rpx auto 0;
		border-radius: 3rpx;
	}
	
	.warning-text {
		text-align: center;
		color: red;
		font-size: 12px;
		margin: 30rpx 0;
	}
	
	.order-content {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.no-data {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
	}
	
	.order-lists {
		border-bottom: 1rpx solid #eee;
		padding: 20rpx 0;
	}
	
	.order-lists:last-child {
		border-bottom: none;
	}
	
	.order-list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.order-list-no {
		font-size: 14px;
		font-weight: bold;
	}
	
	.order-list-state {
		font-size: 12px;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
	}
	
	.state-fail {
		background-color: #ffebee;
		color: #f44336;
	}
	
	.state-await {
		background-color: #fff3e0;
		color: #ff9800;
	}
	
	.state-success {
		background-color: #e8f5e9;
		color: #4caf50;
	}
	
	.icon-info {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background-color: #f44336;
		color: #fff;
		border-radius: 50%;
		font-size: 10px;
		margin-left: 10rpx;
	}
	
	.order-list-content {
		font-size: 13px;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}
	
	.message-content {
		margin: 10rpx 0;
	}
	
	.highlight {
		color: #e95555;
	}
	
	.order-list-footer {
		display: flex;
		justify-content: flex-end;
	}
</style>